<template>
  <!--文章列表块-->
  <div style="margin-left:10px;width: 1230px;">
    <!--文章块级1-->
    <div  style="background-color: pink;margin-bottom: 20px" :key="item" v-for="item in articles">
      <!--内容块1-->
      <div >
        <!--内容保存时间以及标签-->
        <div style="background-color: lightpink;height: 100px">
          <!--标签-->
          <div style="height: 50px;">
            <div >
              <hgroup style="float: left">
                <el-tag type="danger" v-if="e"> {{e.id}}标签</el-tag>
                <el-tag type="danger"> {{item.typeId}}标签</el-tag>
                <el-tag type="danger"> {{item.createDate_Id}}时间线</el-tag>
              </hgroup>
              <!--时间-->
              <div style="float: right;margin-top: 10px">
                <span>{{item.createDate_Id}}日</span>
                <span>22:10</span>
              </div>
            </div>
          </div>
          <div >
            <h1>{{item.title}}（标题）</h1><!--<a>允许用户放入小说链接，增加世界观的扩展性</a>-->
          </div>
        </div>
        <div>
          <!--文章封面图-->
          <img :src="item.image" style="height: 700px;width: 1080px">
        </div>
        <!--图来自网站+id-->
        <div style="height:10px;color: #bcbec2" >
          <span>pid=25615463(图文无关)</span>
        </div>
        <!--文章内容简介-->
        <div style="background-color: #ff6c8e;height: 100px">
          <p>{{item.content}}(简介)</p>
          <div  style="float:left">
            <el-badge :value="item.count" class="el-icon-view " >
              <span>浏览次数</span>
            </el-badge>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      e:null,
    },
    data() {
      return {
        articles:''
      }
    },
    methods: {
      //查询此类文章
      loadArticl(e){
        if (e.name == "四方世界"){
          this.$router.push("/cubenovel")
        }else {
          this.$http.get("/article/"+e.id)
            .then(result=>{
              result=result.data.rows
              this.$emit("getArticles",result)
            })
        }
      },
      //加载主页文章
      loadHomeArticle(e) {
        if (e){
          this.loadArticl(e)
        }
        this.$http.get("/article")
          .then(result => {
            this.articles = result.data.rows;
          })
          .catch(result => {
            console.log(result)
          })
      }
    },

    watch:{
      e:function change(novl,oval) {
        console.log(oval)
      }
    },
    mounted() {
      this.loadHomeArticle();
    },
  }
</script>

<style scoped>


</style>
